<style type="text/css">
  .import-block {
    border: solid 1px; 
    border-radius: 5px; 
    padding: 1em; 
    margin-bottom: 2em;
  }
  .import-block form p > * {
    margin-right: 0.8em;
  }
  .import-block form p label {
    float: left;
    text-align: right;
    width: 150px;
  }
  .import-block form p select {
    height: 28px;
    padding: 4px;
  }
  .import-block form p select, .import-block form p input[type=text] {
    width: 250px;
  }
  .import-block form p input[type=submit] {
    width: 120px;
  }
  span.error {
    background-color:#F3E6E6;
    border-color: #924949;
    border-style: solid;
    border-width: 2px;
    padding: 2px 5px;
  }
</style>

<p>
  Import some Drupal content into the Linked Media Framework:
</p>

<div id="import-node" class="import-block">
  <form action="" method="get" id="import-node-form">
    <p>
      <label for="nid">Node by ID:</label>
      <input type="text" name="nid" size="10" class="numeric integer positive positive-integer" value="" />
      <input type="submit" value="import" />
    </p>
  </form>
</div>

<div id="import-content-type" class="import-block">
  <form action="" method="get" id="import-content-type-form">
    <p>
      <label for="type">Nodes by Content Type:</label>
      <select name="type"><option value=""> </option>{{CONTENT_TYPES_SELECT}}</select>
      <input type="submit" value="import" />
    </p>
  </form>
</div>

<div id="import-taxonomy" class="import-block">
  <form action="" method="get" id="import-taxonomy-form">
    <p>
      <label for="vid">Taxonomy by vocabulary:</label>
      <select name="vid"><option value=""> </option> {{VOCABULARIES_SELECT}} <option value="*">ALL VOCABULARIES</option></select>
      <input type="submit" value="import" />
    </p>
  </form>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>

<script type="text/javascript"> 

  $(document).ready(function() {

    $("form#import-node-form").validate({
      rules: {
        nid: {
          required: true,
          number: true,
          digits: true,
          min : 1
        }
      },
      errorElement: "span"
    });

    $("form#import-node-form").submit(function() {
      if ($(this).valid()) {
        return true;
      } else { 
        return false;
      }
    });

    $("form#import-content-type-form").validate({
      rules: {
        type: {
          required: true
        }
      },
      errorElement: "span"
    });

    $("form#import-content-type-form").submit(function() {
      if ($(this).valid()) {
        return true;
      } else { 
        return false;
      }
    });
    
  });

</script>

